<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>订单结算</title>
    <meta charset="utf-8" name="keywords" content="{{.system.keywords}}" />
    <meta charset="utf-8" name="description" content="{{.system.description}}" />
    <link rel ="shortcut Icon" href="{{.system.pathname}}">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/css/index.min.css" />
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/css/pc/pcbase.css" />
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/font/iconfont.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/xcConfirm.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/toast.css" />
    <style type="text/css">
      /*.omsg{padding: 10px;background: #fff}*/
      .omsg td{padding: 10px;background: #fff;border-bottom: 1px solid #ccc}
      .orderSel{margin-top: 20px;}
    </style>
  </head>
  
  <body>
    <!--from fragment-->
  {{template "pc/public/head.html" .}}
  {{template "pc/public/search.html" .}}
    <div class="buildOrder">
      <div class="address">
        <p>选择收货地址 <a href="/my/address" style="float: right;color: #e31939;margin-right: 25px">管理收货地址</span></a>
        {{if .address}}
        {{range $k,$v:=.address}}
        <dl {{if eq $k 0}}class="on"{{end}} data-id="{{$v.id}}">
          <dt>{{$v.name}} {{$v.mobile}}</dt>
          <dd>{{$v.shen}} {{$v.shi}} {{$v.qu}} </dd>
        </dl>
        {{end}}
        {{end}}
        <div style="width: 100%;clear: both;margin-bottom: 20px;font-size: 14px;color: #c97;font-weight: 600"><a href="/my/address" style="color:  #c97">添加新地址</a></div>
      </div>
      <script type="text/javascript">
        console.log({{.info}})
      </script>
      <div class="orderPrd">
        <p>确认订单信息</p>
        {{range .info}}
        <table class="prd" id="{{.gid}}">

          <tr>
            <th colspan="4" align="left"><a href="/shop?id={{.gid}}"><span class="mui-icon iconfont fs-16">&#xe75f;</span> {{if .name}}{{.name}}{{else}}{{$.system.name}}{{end}}</a></th>
          </tr>
          {{range .shopcar}}
          <tr>
            <td width="20%"> <img src="{{.pathname}}" alt=""> </td>
            <td width="30%">
              <p>{{.title}}</p>
              <p>装箱数:{{.number}}</p>
              <p>型号:{{.model}}</p> 
            </td>
            <td width="25%" style="color: #e31939;font-weight: 600">&yen;{{.pricem}}/{{if eq .spec2 "1"}}件{{else}}箱{{end}}</td>
            <td width="25%">x{{.num}}</td>
            <!-- <td>118.00</td> -->
          </tr>
          {{end}}
          <tr class="omsg">
            <td rowspan="1"><input type="checkbox" name="invoice" data-gid="{{.gid}}">开发票</td>
            <td>
              店铺优惠：
              <select name="coupon" data-gid="{{.gid}}">
                {{if .coupon}}
                <option value="0">不使用优惠券</option>
                {{range .coupon}}
                <option value="{{.id}}">{{.name}}</option>
                {{end}}
                {{else}}
                <option value="0">您还没有优惠券</option>
                {{end}}
              </select>
            </td>
            <td colspan="2">备注：<input type="text" name="content" placeholder="说说您的其他想法" style="width: calc(60% - 50px)"></td>
          </tr>
          <tr>
            <td colspan="3"></td>
            <td style="text-align: center;">商品合计 <span class="allnum" style="color: #e31939;font-size: 16px;font-weight: 600">&yen;{{.pricesum}}</span></td>
          </tr>
        </table>
        {{end}}
        <table class="orderSel">
          <tr>
            <td colspan="3" style="width:60%">
              <ul class="pay">
                <li data-type="2"  class="on"><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/wxpay.png" alt=""></li>
                <li data-type="1"><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/money.png" alt=""></li>
                <li data-type="3"><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/alipay.png" alt=""></li>
              </ul>
            </td>
            <td colspan="1" style="width:20%">积分 <span id="integral"></span></td>
            <td colspan="1" style="width:20%">商品合计<span id="sumprice"></span></td>
          </tr>
<!--          商品合计（含运费）-->
        </table>
        <button id="up">提交订单</button>
      </div>
    </div>
    <style type="text/css">
      .wxpay_mask{position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);z-index: 100000;top: 0;left: 0;display: none;box-sizing: border-box;}
      .wxpay_mask #qrcode{position: absolute;top: calc(50vh - 100px);width: 200px;height: 200px;left: calc(50vw - 100px);z-index: 1000001;
        background: #fff;padding: 20px;border-radius: 5px;}
      .scan{position: absolute;top: calc(50vh + 120px);width: 200px;height: 45px;left: calc(50vw - 100px);z-index: 1000001;
        background: #fff;padding:0 20px 0 20px;border-radius: 5px;font-size: 16px;line-height: 45px;text-align: left;color: #666}
      .scan i.iconfont{color: #009900;font-size: 22px;margin-right: 5px;float: left;}
    </style>
  <div class="wxpay_mask">
    <div id="qrcode">
      
    </div>
    <div class="scan">
      <i class="iconfont">&#xe66c;</i>请使用微信扫一扫
    </div>
  </div>
{{template "pc/public/foot.html" .}}
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/jquery.min.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/xcConfirm.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/toast.js"></script>
  </body>
  <script type="text/javascript">
    var add = document.querySelectorAll(".address dl");
    var payType = document.querySelectorAll("ul.pay li");
    for (var i = 0; i < add.length; i++) {
      add[i].onclick = function(){
        document.querySelector(".address dl.on").className = ""
        this.className = "on"
      }
    }
    for (var i = 0; i < payType.length; i++) {
      payType[i].onclick = function(){
        document.querySelector("ul.pay li.on").className = ""
        this.className = "on"
      }
    }
  </script>
  <script type="text/javascript">
    var info={{.info}};
    for(let i=0;i<info.length;i++){
      info[i].invoice="0";
      info[i].yid="0";
    }
    var invoice={{.invoice}};
  function pricechange(){
    
    var pricesum=0.00;
    for(let i=0;i<info.length;i++){
      var shopprice;
      var gid=info[i].gid
      if(info[i].invoice=="0"){
        shopprice=info[i].pricesum
      }else{
        shopprice=info[i].pricet
      }
      if(info[i].yid!="0"){
        for(var j=0;j<info[i].coupon.length;j++){
          if(info[i].yid==info[i].coupon[j].id){
        console.log(1)
            shopprice-=info[i].coupon[j].offer
            break
          }
        }
      }
      console.log(shopprice)
      $('#'+gid).find('.allnum').html('&yen;'+shopprice)
      pricesum+=parseFloat(shopprice)
    }
    pricesum = pricesum.toFixed(2)
    var integral=parseInt(pricesum/100) 
    $('#sumprice').html('&yen;'+pricesum)
    $('#integral').html(integral)
  }
  pricechange()
  $('select[name="coupon"]').change(function(){
    var gid=$(this).attr('data-gid')
    var id=$(this).val()
    for (var i=0;i<info.length;i++){
      if(gid==info[i].gid){
        info[i].yid=id
        break
      }
    }
    console.log(info)
    pricechange()
  })
  $('input[name="invoice"]').change(function(){
    var gid=$(this).attr('data-gid')
    console.log(gid)
    var checked=$(this).prop('checked')
    if(checked){
      if(invoice){
        for (var i=0;i<info.length;i++){
          if(gid==info[i].gid){
            info[i].invoice=1
            break
          }
        }
      }else{
        $(this).prop(false)
        wxc.xcConfirm("您还没有发票信息,前往填写吗?","confirm",{onOk:function(){
          window.location.href="/my/invoice"
        }});
      }
    }else{
      for (var i=0;i<info.length;i++){
        if(gid==info[i].gid){
          info[i].invoice=0
          break
        }
      }
    }
    pricechange()
  })
  $('#up').click(function(){
    var data={};
    var address=$('.address').find('.on').attr('data-id');
    if(address){
      data.address=address
    }else{
      wxc.xcConfirm("请选择收货地址","info")
      return false
    }
    var type=$('.pay').find('.on').attr('data-type');
    data.type=type
    data.style=3
    var pdate=[]
    for(var i=0;i<info.length;i++){
      var obj={}
      obj.invoice=info[i].invoice
      obj.yid=info[i].yid
      obj.gid=info[i].gid
      var carids=[]
      for(var j=0;j<info[i].shopcar.length;j++){
        carids.push(info[i].shopcar[j].id)
      }
      obj.carid=carids.join(",")
      obj.content=$('#'+info[i].gid).find("input[name='content']").val()
      pdate.push(obj)
    }
    data.shop=pdate
    payajax(data);
  })
  var oid='';
  function payajax(postdata){
    console.log(postdata)
    var data=JSON.stringify(postdata);
    $.ajax({
      url:window.location.href,
      type:'post',
      data:data,
      success:function(res){
        console.log(res)
        if(res.status==5){
          wxc.xcConfirm("您已支付过这笔订单","info",{onClose:function(){
            window.location.href="/my/order"
          }})
          return
        }
        if(res.type==1){
          if(res.status==0){
            wxc.xcConfirm("支付失败,请重试!","info")
          }else if(res.status==2){
            wxc.xcConfirm("余额不足,是否前往充值?","confirm",{onOk:function(){
              window.location.href="/my/recharge"
            }})
          }else if(res.status==1){
            window.location.href="/my/order"
          }else if(res.status==3){
            wxc.xcConfirm("支付密码错误","error")
          }
        }else if(res.type==2){
          //微信支付
          if (res.status==0){
            wxc.xcConfirm("支付失败,请重试!","info")
          }else{
            wxpay(res.res.url)
            oid=res.oid
          }
        }else if(res.type==3){
          //支付宝支付
          if (res.status==0){
            wxc.xcConfirm("支付失败,请重试!","info")
          }else{
            window.location.href=res.res
          }
        }
      }
    })
  }
  // wxpay("http://test.tongcaigou.com")
  function wxpay(codeurl){
    $('#qrcode').qrcode({
      render: "canvas", //也可以替换为table
      width: 200,
      height: 200,
      text: codeurl
    })
    $('.wxpay_mask').show()
    $('body').css({ 
         "overflow-x":"hidden",
         "overflow-y":"hidden"       
     });
    setInterval(checkPay,5000)
  }
  function checkPay(){
    $.ajax({
      url:'/shopcar/ordercheck',
      data:{oid:oid},
      success:function(res){
        if(res==1){
          $('.wxpay_mask').hide()
            showToast("支付成功")
            setTimeout(function(){window.location.href='/my/order'}, 1500)
        }
      }
    })
  }
  </script>
</html>